<!-- 基本信息 -->
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { getHistoryApi, deleteHistoryApi, getTaskProcessEvalApi } from '@/common/apis/train'
import { useRoute } from 'vue-router'
import XEUtils from 'xe-utils'
const route = useRoute()
const historyData = ref<any>()
const tableData = ref<any[]>([])
const taskModeMap = ref<string>()
const tableRef = ref<InstanceType<typeof Table> | null>(null)
const emit = defineEmits(['getTaskCollectData','handleScroll'])
const task_process_round = ref<number>(0)
const handleDetail = (row: any) => {
  task_process_round.value = row.task_process_round
  // 高亮当前行
  tableRef.value?.setCurrentRow(row)
  emit('getTaskCollectData', {
    roundNumber: row.task_process_round as string,
    taskModeMap: taskModeMap.value as string
  })
  emit('handleScroll')
}
const handleDelete = (row: any) => {
  deleteHistoryApi(route.query.id as string, taskModeMap.value as string, row.task_process_round as string).then((res) => {
  })
}

onMounted(() => {
  getHistoryApi(route.query.id as string, taskModeMap.value as string).then((res:any) => {
    historyData.value = res.data
    // historyData.value.forEach((item: any) => {
    //   // 解析评估数据
    //   const processEva: any = JSON.parse(item.process_eval)
    //   // 综合能力
    //   item.comprehensive_ability = processEva.comprehensive_ability
    //   // 感知能力
    //   item.perception.ability = processEva.perception ? processEva.perception.ability : 0
    //   item.perception.detective = processEva.perception ? processEva.perception.detective : 0
    //   item.perception.search = processEva.perception ? processEva.perception.regional_search : 0
    //   // 认知能力
    //   item.cognition.autonomy = processEva.cognition ? processEva.cognition.autonomy : 0
    //   item.cognition.cooperativity = processEva.cognition ? processEva.cognition.cooperativity : 0
    //   item.cognition.ability = processEva.cognition ? processEva.cognition.ability : 0
    //   // 决策能力
    //   item.decision.fire_support = processEva.decision ? processEva.decision.fire_support : 0
    //   item.decision.game_learning = processEva.decision ? processEva.decision.game_learning : 0
    //   item.decision.ability = processEva.decision ? processEva.decision.ability : 0
    //   // 行动能力
    //   item.action.cluster_grouping = processEva.action ? processEva.action.cluster_grouping : 0
    //   item.action.cooperativity = processEva.action ? processEva.action.cooperativity : 0
    //   item.action.ability = processEva.action ? processEva.action.ability : 0
    // })
  })
})
watch(() => taskModeMap.value, (newVal) => {
  emit('getTaskCollectData', {
    roundNumber: 0,
    taskModeMap: taskModeMap.value as string
  })
  getTaskProcessEvalApi(route.query.id as string, newVal as string).then((res: any) => {
    tableData.value = XEUtils.orderBy(res.data, [['task_process_round', 'asc']])})
})
</script>

<template>
  <div class="steps-wrapper">
    <div class="cpi-header-title">回放记录</div>
    <el-form label-width="auto" style="max-width: 600px">
      <el-form-item label="选择推演">
        <el-select v-model="taskModeMap" placeholder="请选择第几次推演" style="width: 100%">
          <el-option v-for="item in historyData" :key="item.task_number" :label="`第 ${item.task_number} 次推演`"
            :value="item.task_number" />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="cpi-header-config" v-if="taskModeMap">
      <div>{{ `第 ${taskModeMap} 次推演数据：` }}</div>
      <div class="cpi-header-config-info">任务完成情况：20%</div>
      <div class="cpi-header-config-info">资源消耗与效益：20%</div>
      <div class="cpi-header-config-info">站损比与损失情况：20%</div>
      <div class="cpi-header-config-info">时间与效率：20%</div>
      <div class="cpi-header-config-info">战场态势评估：20%</div>
      <div class="cpi-header-config-info">协同与指挥评估：20%</div>
    </div>
    <div class="number-info">
      <SvgIcon name="info-little-title" class="svg-icon primary" />
      <span class="cpi-header-text">局数信息</span>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%;height:450px" highlight-current-row row-key="task_process_round" ref="tableRef">
        <el-table-column prop="task_process_round" label="名称">
          <template #default="{ row }">
            第 {{ row.task_process_round }} 局
          </template>
        </el-table-column>
        <el-table-column sortable prop="task_status" label="任务完成情况" />
        <el-table-column sortable prop="basicInfo" label="资源消耗与效益" />
        <el-table-column sortable prop="description" label="战损与损失情况" />
        <el-table-column sortable prop="time" label="时间与效率" />
        <el-table-column sortable prop="time" label="战场态势评估" />
        <el-table-column sortable prop="time" label="协同与指挥评估" />
        <el-table-column sortable prop="create_time" label="时间" />
        <el-table-column label="操作" align="center ">
          <template #default="scope">
            <el-space :size="12">
              <el-link :underline="false" @click.stop v-throttle="() => handleDetail(scope.row)" title="查看"
                class="cpi-content-operate">
                <el-icon :size="18">
                  <View />
                </el-icon>
              </el-link>
              <el-link :underline="false" type="danger" @click.stop v-throttle="() => handleDelete(scope.row)"
                title="删除">
                <el-icon :size="18">
                  <Delete />
                </el-icon>
              </el-link>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.steps-wrapper {
  padding: 20px;
  width: 100%;
  height: auto;
  background: #031527;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

.cpi-header-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.radio-text {
  display: inline-block;
  margin-right: 10px;
}

.cpi-header-config {
  display: flex;
  align-items: center;
  font-size: 14px
}

.cpi-header-config-info {
  margin-left: 10px;
  width: auto;
  height: 30px;
  line-height: 30px;
  background: rgba(57, 182, 255, 0.12);
  padding: 0px 8px;
  color: #C2C8CC;
}

.number-info {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 16px;
}
</style>
